<template>
  <div>
    <div class="sreach">
      <input type="text" placeholder="输入城市名或拼音" class="search-input" v-model="keyword">
    </div>
    <div class="sreach-content" ref="search" v-show="keyword">
      <ul >
        <li
          v-for="item in list"
          class="sreach-item border-bottom"
          @click="getCities(item.name)"
        >
          {{item.name}}
        </li>
        <li  class="sreach-item border-bottom" style="text-align: center" v-if="hasNoData">
           无搜索结果
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
  import Bscroll from 'better-scroll'
    export default {
      props:{
        cities:{
          type:Object,
          default:{}
        }
      },
        data() {
            return {
              keyword:'',
              timer:null,
              list:[]
            }
        },
      watch:{
        keyword(){
          if(this.timer){
            clearTimeout(this.timer)
          }
          if(!this.keyword){
              this.list = [];
              return
          }
          this.timer = setTimeout(()=>{
             const result = [];
              for(let i in this.cities){
                this.cities[i].forEach((value)=>{
                  if(value.spell.indexOf(this.keyword)>-1 || value.name.indexOf(this.keyword)>-1){
                    result.push(value)
                  }
                })
              }
              this.list = result
          },10)
        }
      },
      mounted(){
         this.scroll = new Bscroll(this.$refs.search)
      },
      methods:{
        getCities(city){
          this.$store.dispatch('changeCities',city);
          this.$router.push('/prefile')
        }
      },
      computed:{
         hasNoData(){
           return ! this.list.length
        }
      }
    }
</script>

<style lang="stylus" scoped>
  @import "../../../common/stylus/minxies.styl"
  .sreach
    height 36px
    padding 5px
    background-color #00bcd4
    .search-input
      outline none
      box-sizing: border-box
      width: 100%
      height: 32px
      padding: 0 5px
      line-height: 32px
      text-align: center
      border-radius: 4px
      color #666
  .sreach-content
    position absolute
    overflow hidden
    top:90px
    right 0
    bottom 0
    left 0
    z-index 1000
    background #eee
    .sreach-item
      line-height 40px
      padding-left:10px
      background #fff
      bottom-border-1px(#e4e4e4)

</style>
